import { Form, Input, Modal, Select } from 'antd';
import React, { useState, useEffect } from 'react';
// import styles from './index.module.less';
const { luckysheet } = window;

const PrintOptions = (props) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log(values);
  };

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = async () => {
    // setIsModalOpen(false);
    const values = await form.validateFields();
    console.log(values);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  useEffect(() => {
    luckysheet.eventCenter.on('printOptions', () => {
      console.log('打印');
      showModal();
    });
    return () => {};
  }, []);

  // 打印纸张变更时触发
  const onChangePaper = (value) => {
    console.log(value);
    if (value === 'A4') {
      form.setFieldsValue({
        width: 718,
        height: 1047,
      });
    }
  };

  return (
    <div>
      <Modal
        title="打印设置"
        visible={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        zIndex={1010}
        width={600}
      >
        <Form
          form={form}
          name="control-hooks"
          onFinish={onFinish}
          labelCol={{ span: 4 }}
          initialValues={{
            printingPaper: 'A4',
            width: 718,
            height: 1047,
          }}
        >
          <Form.Item name="printingPaper" label="打印纸张" rules={[{ required: true }]}>
            <Select placeholder="请选择" onChange={onChangePaper} allowClear>
              <Select.Option value="A4">A4：210mm X 297</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item label="像素宽高(px)" style={{ marginBottom: 0 }}>
            <Form.Item
              name="width"
              rules={[{ required: true }]}
              style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
            >
              <Input placeholder="纸张宽度" disabled suffix="px" />
            </Form.Item>
            <span
              style={{
                display: 'inline-block',
                width: '24px',
                lineHeight: '32px',
                textAlign: 'center',
              }}
            >
              -
            </span>
            <Form.Item
              name="height"
              rules={[{ required: true }]}
              style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
            >
              <Input placeholder="纸张高度" disabled suffix="px" />
            </Form.Item>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};
export default PrintOptions;
